<template>
  <el-table
    :data="resources"
    class="custom-table thead-bg-color"
    @row-click="rowClick"
    v-loading="loading"
  >
    <el-table-column :label="titleLabel">
      <div slot-scope="{ row }" class="flex flex-wrap">
        <router-link
          :to="row.path"
          :title="row.title"
          class="block link line1 m-r-10"
          v-text="row.title"
        />
        <el-tag
          v-for="tag in row.tags"
          :key="tag"
          size="mini"
          disable-transitions
          v-text="tag"
        />
      </div>
    </el-table-column>
    <el-table-column :label="authorLabel" width="160">
      <router-link slot-scope="{ row }" :to="`/users/${row.author.id}`" class="line1 link">
        <i class="el-icon-user"></i>
        {{ row.author.nickname }}
      </router-link>
    </el-table-column>
    <el-table-column label="所属空间" width="200">
      <router-link slot-scope="{ row }" :to="`/spaces/${row.space.id}`" class="line1 link">
        {{ row.space.title }}
      </router-link>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'resources-issues-list',
  props: {
    listType: {
      type: String, // docs issues spaces
      required: true,
    },
    resources: {
      type: Array,
      required: true,
    },
    loading: Boolean,
  },
  computed: {
    titleLabel() {
      switch (this.listType) {
        case 'docs': return '资源名';
        case 'issues': return '问题标题';
        default: return '';
      }
    },
    authorLabel() {
      switch (this.listType) {
        case 'docs': return '作者';
        case 'issues': return '发帖人';
        default: return '';
      }
    },
  },
  methods: {
    rowClick(row) {
      if (row.path) {
        this.$root.$emit('routerPush', { path: row.path });
      }
    },
  },
};
</script>

<style></style>
